<template>
  <div>
    <div class="header">
      <div class="logo"></div>
      <span class="iconfont icon-caidan" @click='show'></span>
    </div>
    <cube-drawer
      ref="drawer"
      title=""
      :data="data"
       @select="selectHandler"
    ></cube-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
    props:{
        categories:{
            type:Array,
            default:()=>[]
        }
    },
  components: {},

  computed: {
      data(){
          let defaultActive = [{text:'全部课程',value:-1}];
          return this.categories.length >0? [[...defaultActive,...this.categories]]:[defaultActive];
      }
  },

  methods: {
      show(){
          this.$refs.drawer.show()
      },
      selectHandler(value){
          this.$emit('change',value[0])
      }
  },
};
</script>
<style lang="less" scoped>
.header {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #2a2a2a;
  .logo {
    height: 50px;
    width: 50px;
  }
  .icon-caidan {
    color: #fff;
    font-size: 24px;
  }
}
</style>
